import React from 'react';
import { Container } from '@/components/common/container';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Toolbar, ToolbarHeading } from '@/layouts/demo1/components/toolbar';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';

// 静态模拟商品详情数据
const mockProduct = {
  id: 1,
  name: 'Apple iPhone 15 Pro',
  category: '手机',
  price: 8999,
  originalPrice: 9999,
  stock: 50,
  sales: 120,
  status: 'active',
  description: '最新一代旗舰手机，搭载A17芯片，超强影像系统。',
  images: [
    'https://dummyimage.com/300x300/eee/333&text=iphone15',
    'https://dummyimage.com/300x300/eee/333&text=iphone15-2',
  ],
  tags: ['热销', '新品'],
  specifications: [
    { key: '屏幕', value: '6.7英寸 OLED' },
    { key: '处理器', value: 'A17 仿生芯片' },
    { key: '内存', value: '8GB' },
    { key: '存储', value: '256GB' },
  ],
  skus: [
    { id: 'sku1', price: 8999, stock: 30, attributes: { 颜色: '黑色', 存储: '256GB' } },
    { id: 'sku2', price: 9299, stock: 20, attributes: { 颜色: '白色', 存储: '512GB' } },
  ],
};

const ProductDetailPage = () => {
  const product = mockProduct;
  return (
    <Container>
      <Toolbar>
        <ToolbarHeading title="商品详情" description="查看商品的详细信息" />
      </Toolbar>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-6">
        {/* 商品图片 */}
        <div className="space-y-4">
          {product.images.map((img, idx) => (
            <img key={idx} src={img} alt={product.name} className="w-full h-64 object-cover rounded" />
          ))}
        </div>
        {/* 商品基本信息 */}
        <Card>
          <CardHeader>
            <CardTitle>{product.name}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <span className="text-xl font-bold text-primary">¥{product.price}</span>
                {product.originalPrice && product.originalPrice > product.price && (
                  <span className="text-sm text-muted-foreground line-through">¥{product.originalPrice}</span>
                )}
                <Badge variant={product.status === 'active' ? 'success' : 'destructive'}>
                  {product.status === 'active' ? '上架' : '下架'}
                </Badge>
              </div>
              <div className="text-sm text-muted-foreground">分类：{product.category}</div>
              <div className="text-sm text-muted-foreground">库存：{product.stock}，销量：{product.sales}</div>
              <div className="text-sm">{product.description}</div>
              <div className="flex flex-wrap gap-2 mt-2">
                {product.tags.map((tag, idx) => (
                  <Badge key={idx} variant="secondary">{tag}</Badge>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
      {/* 规格参数 */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>规格参数</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableBody>
              {product.specifications.map((spec, idx) => (
                <TableRow key={idx}>
                  <TableCell className="w-32 text-muted-foreground">{spec.key}</TableCell>
                  <TableCell>{spec.value}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
      {/* SKU列表 */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>SKU列表</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>SKU ID</TableHead>
                <TableHead>价格</TableHead>
                <TableHead>库存</TableHead>
                <TableHead>属性</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {product.skus.map((sku) => (
                <TableRow key={sku.id}>
                  <TableCell>{sku.id}</TableCell>
                  <TableCell>¥{sku.price}</TableCell>
                  <TableCell>{sku.stock}</TableCell>
                  <TableCell>
                    {Object.entries(sku.attributes).map(([k, v]) => `${k}:${v}`).join('，')}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </Container>
  );
};

export default ProductDetailPage; 